<template>
  <v-scroll
    @load="load"
    :refresher-enabled="refresherEnabled"
    @ref="ref"
    ref="scroll"
  >
    <slot v-bind="{ list }"> </slot>
  </v-scroll>
</template>
<script>
export default {
  name: "paging",
  props: {
    data: {
      default() {
        return {};
      },
      type: Object,
      require: false,
    },
    refresherEnabled: {
      default: true,
      required: false,
      type: Boolean,
    },
    ajax: {
      require: true,
      type: Function,
    },
  },
  data() {
    return {
      list: [],
      page: 0,
    };
  },
  methods: {
    resetData() {
      this.$refs.scroll.resetData();
    },
    load(over) {
      this.page++;
      this.getList(over);
    },
    ref(over) {
      this.page = 1;
      this.getList(over);
    },
    getList(over) {
      let data = Object.assign(
        {
          page: this.page,
        },
        this.data
      );

      this.ajax(data)
        .then((res) => {
          let queryVo = res;
          if (queryVo.meta.current_page == 1) {
            this.list = [];
			 setTimeout(()=>{
							this.list = [...this.list, ...queryVo.data];
							 console.log(this.list.length)
							over &&
							  over({
							    finished: this.list.length >= queryVo.meta.total,
							  });
						},60)
          } else {
            this.list = [...this.list, ...queryVo.data];
            over &&
              over({
                finished: this.list.length >= queryVo.meta.total,
              });
          }
        })
        .catch(() => {
          over && over();
        });
    },
  },
  created() {},
};
</script>